<template>
  <div id="container">
    <el-dialog
      :title="!dataForm.id ? '新建' : '编辑'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="SHZY-dialog SHZY-dialog_center"
      lock-scroll
      append-to-body
      width="600px"
    >
      <el-row :gutter="15" class="">
        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="100px"
          label-position="right"
          :rules="rules"
        >
          <el-col :span="24">
            <!-- <el-form-item label="父级id" prop="parentId">
						<el-input v-model='dataForm.parentId' placeholder='请输入' clearable required
							:style='{ "width": "100%" }' maxlength='50'>
						</el-input>
					</el-form-item> -->
            <el-form-item label="父级" prop="parentId">
              <tree-select
                v-model="dataForm.parentId"
                :data="treeData"
                :nodeKey="'id'"
                :props="{ label: 'name', children: 'children' }"
                placeholder="请选择"
                @change="handleSelectionChange"
              ></tree-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单编码" prop="menuCode">
              <el-input
                v-model="dataForm.menuCode"
                placeholder="请输入"
                clearable
                required
                :style="{ width: '100%' }"
                maxlength="50"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input
                v-model="dataForm.menuName"
                placeholder="请输入"
                clearable
                required
                :style="{ width: '100%' }"
                maxlength="50"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图标" prop="icon">
              <el-input
                v-model="dataForm.icon"
                placeholder="请输入"
                clearable
                required
                :style="{ width: '100%' }"
                maxlength="50"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型" prop="type">
              <el-select
                v-model="dataForm.type"
                placeholder="请选择"
                :style="{ width: '100%' }"
                @change="typeChange"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                v-model="dataForm.type"
                placeholder="请输入"
                clearable
                required
                :style="{ width: '100%' }"
                maxlength="50"
              >
              </el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址" prop="url" v-if="urlIsShow">
              <el-input placeholder="请输入内容" v-model="dataForm.url">
                <template slot="prepend">@/views/</template>
              </el-input>
              <!-- <el-input
                v-model="dataForm.url"
                placeholder="请输入"
                clearable
                required
                :style="{ width: '100%' }"
                maxlength="50"
              >
              </el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="status">
              <el-switch
                v-model="dataForm.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- <div>选中项的值: {{ selectedValue }}</div>
      <tree-select
        v-model="selectedValue"
        :data="treeData"
        :nodeKey="'id'"
        :props="{ label: 'name', children: 'children' }"
        placeholder="请选择"
        @change="handleSelectionChange"
      ></tree-select> -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialogedit()">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitFormEdit()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import TreeSelect from "./treeSelect.vue";
// import api from "@/api/treemenu";
import api from "@/api/menu";
export default {
  components: {
    TreeSelect,
  },
  data() {
    return {
      urlIsShow: false,
      typeOptions: [
        {
          value: "contents",
          label: "目录",
        },
        {
          value: "page",
          label: "页面",
        },
      ],
      btnLoading: false,
      loading: false,
      visible: false,
      dataForm: {
        id: "",
        parentId: undefined,
        menuCode: undefined,
        menuName: undefined,
        icon: undefined,
        url: undefined,
        type: undefined,
        status: "1",
      },
      rules: {
        parentId: [
          {
            required: true,
            message: "请输入父级id",
            trigger: "change",
          },
        ],
        desc: [
          {
            required: true,
            message: "请输入问题描述",
            trigger: "blur",
          },
        ],
      },
      treeData: [],
    };
  },
  methods: {
    typeChange(val) {
      if (val == "page") {
        this.urlIsShow = true;
      } else {
        this.urlIsShow = false;
        this.dataForm.url=undefined;
      }
    },
    closeDialogedit() {
      this.visible = false;
    },
    submitFormEdit() {
      console.log("form", this.dataForm);
      //验证规则
        this.$refs["elForm"].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              console.log("修改方法");
              api.Update(this.dataForm.id, this.dataForm).then((res) => {
                if ((res.state = "success")) {
                  this.$message({ message: "更新成功！", type: "success" });
                  this.visible = false;
                  this.$emit("refresh", true);
                }
              });
            } else {
              api.Create(this.dataForm).then((res) => {
                console.log(res);
                if (res.state == "success") {
                  this.$message({ message: "新增成功！", type: "success" });
                  this.visible = false;
                  this.$emit("refresh", true);
                  //执行列表刷新
                } else {
                  this.$message.error("新增失败！");
                  this.visible = false;
                }
              });
            }
          }
        });
      // 提交数据
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        api.getMenuSelect().then((res) => {
          console.log(res);
          let topItem = {
            name: "顶级节点",
            hasChildren: true,
            id: "-1",
            children: res,
          };
          this.treeData = [topItem];
        });
        if (this.dataForm.id) {
          console.log(id);
          console.log(this.dataForm.id);
          //获取详情数据
          api.GetMenuId(this.dataForm.id).then((res) => {
            if(res.type=="page"){
                this.urlIsShow = true;
            }else{
                this.urlIsShow = false;
            }
            this.dataForm = res;
          });
        }
      });
    },
    // 当选中节点变化时触发
    handleSelectionChange(newValue) {
      console.log("选中项的值：", newValue);
      // 在这里可以执行其他逻辑，例如向后端发送请求
    },
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  background: #fff;
  text-align: right;
}
.table-box {
  height: calc(100vh - 330px); /*示例中顶部区域固定高度190px*/
}
// ::v-deep .el-table--border th.el-table__cell,
// ::v-deep .el-table td.el-table__cell {
//   border-bottom: none !important;
// }

// ::v-deep .el-table--border .el-table__cell {
//   border-right:none !important;
// }

// ::v-deep .el-table--group, .el-table--border{
//   border: none !important;
// }
// .el-table__cell{
//   padding: 0px 0;
// }
</style>>